<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<wlk-navbar title="选择套餐" navbarType='0'></wlk-navbar>
		<view v-if="!loading">
			<view class="pack pd30">
				<view class="head-title mb20">套餐选择</view>
				<view class="wd100 overHidden">
					<u-scroll-list :indicator="false">
						<view class="wlkflex">
							<view @click="radioClick(index)"
								:class="'overHidden pack-item br04 relative wlkflex '+[suitIndex==index?'active':'']"
								:style="suitIndex==index?'border-color:'+themeColor:''"
								v-for="(item, index) in line.suitinfo" :key="index">
								<view class="wd100 center name"
									:style="suitIndex==index?'color:'+themeColor:'color:#999999'">
									{{item.name}}
								</view>
								<view class="active-icon" :style="{backgroundColor:themeColor}" v-if="suitIndex==index">
									<u-icon size="12" name="checkmark" color="#FFFFFF"></u-icon>
								</view>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
			<u-gap height="8" bgColor="#F9F9F9"></u-gap>
			<view class="wlkflex justify-between day-title">
				<view class="title">出发日期</view>
				<view class="desc" v-if="line.linebefore>0">*建议提前<text
						:style="{color:themeColor}">{{line.linebefore}}</text>天预订</view>
			</view>
			<wlk-calendar @selectedDate="calculate" :priceIndex="priceIndex" :tabs="calendarTabs"
				:list="calendarList"></wlk-calendar>
			<view class="order-box" v-if="calendarList && !$u.test.isEmpty(calendarList)">
				<u-gap height="8" bgColor="#F9F9F9"></u-gap>
				<view class="title">出行人数</view>
				<view class="order-info">
					<block v-if="!$u.test.isEmpty(selectedDate)">
						<u-cell-group :border="false">
							<u-cell :border="false" v-if="selectedDate.price>0">
								<view slot="title" class="wlkflex">
									<view class="step-title wlkflex">
										<view class="mr10">成人</view>
										<u-icon v-if="line.suitinfo[suitIndex].person" @click="Tip('adult')"
											name="info-circle" color="#999" size="15"></u-icon>
									</view>
									<view class="ml15 price">
										<text>￥{{selectedDate.price}}</text><text class="col9">/人</text>
									</view>
								</view>
								<u-number-box slot="right-icon" v-model="orderInfo.adult_num" step="1" disabledInput
									:min="adult_min" name="adult_num"
									:max="selectedDate.stock==-1?max_num:selectedDate.stock-orderInfo.elder_num-orderInfo.child_num"
									@change="changeNum">
								</u-number-box>
							</u-cell>
							<u-cell :border="false" v-if="selectedDate.elderprice>0">
								<view slot="title" class="wlkflex">
									<view class="step-title wlkflex">
										<view class="mr10">老人</view>
										<u-icon v-if="line.suitinfo[suitIndex].oldperson" @click="Tip('old')"
											name="info-circle" color="#999" size="15"></u-icon>
									</view>
									<view class="ml15 price">
										<text>￥{{selectedDate.elderprice}}</text><text class="col9">/人</text>
									</view>
								</view>
								<u-number-box slot="right-icon" v-model="orderInfo.elder_num" step="1" :min="elder_min"
									name="elder_num"
									:max="selectedDate.stock==-1?max_num:selectedDate.stock-orderInfo.adult_num-orderInfo.child_num"
									disabledInput @change="changeNum">
								</u-number-box>
							</u-cell>
							<u-cell :border="false" v-if="selectedDate.childprice>0">
								<view slot="title" class="wlkflex">
									<view class="step-title wlkflex">
										<view class="mr10">儿童</view>
										<u-icon v-if="line.suitinfo[suitIndex].child" @click="Tip('child')"
											name="info-circle" color="#999" size="15"></u-icon>
									</view>
									<view class="ml15 price">
										<text>￥{{selectedDate.childprice}}</text><text class="col9">/人</text>
									</view>
								</view>
								<u-number-box slot="right-icon" v-model="orderInfo.child_num" step="1" :min="child_min"
									name="child_num"
									:max="selectedDate.stock==-1?max_num:selectedDate.stock-orderInfo.adult_num-orderInfo.elder_num"
									disabledInput @change="changeNum">
								</u-number-box>
							</u-cell>
						</u-cell-group>
						<block v-if="selectedDate.roomblance && selectedDate.roomblance>0">
							<u-gap height="8" bgColor="#F9F9F9"></u-gap>
							<view class="title">单房差</view>
							<u-cell-group :border="false">
								<u-cell :border="false">
									<view slot="title" class="wlkflex">
										<view class="step-title wlkflex">
											<view class="mr10">购买单房差</view>
											<u-icon v-if="line.suitinfo[suitIndex].room" @click="Tip('room')"
												name="info-circle" color="#999" size="15"></u-icon>
										</view>
										<view class="ml15 price">
											<text>￥{{selectedDate.roomblance}}</text><text class="col9">/份</text>
										</view>
									</view>
									<u-number-box slot="right-icon" v-model="orderInfo.room_num" step="1"
										:min="room_min" :max="room_max" disabledInput @change="changeRoom">
									</u-number-box>
								</u-cell>
							</u-cell-group>
						</block>
						<block>
							<u-gap height="8" bgColor="#F9F9F9"></u-gap>
							<view class="title">优惠券
								<u-button type="info" text="暂无优惠券" v-if="coupon == ''"></u-button>
								<u-button text="选择优惠券>" @click="show = true"
									v-if="check == false & coupon != ''"></u-button>
								<u-button type="info" :text="select" v-else-if="check == true"
									@click="show = true"></u-button>
							</view>
						</block>
						<block v-if="!$u.test.isEmpty(line.insuranceinfo)">
							<u-gap height="8" bgColor="#F9F9F9"></u-gap>
							<view class="title">保险</view>
							<view class="alert br08">我们十分关心您的出行安全：建议像大部分旅客一样选购旅游保险，以保障您的权益与出行安全</view>
							<view class="pd030 pb20">
								<view class="wlkflex justify-between insurance" @click="checkboxChange(item)"
									v-for="(item,index) in line.insuranceinfo" :key="index">
									<view class="insurance-icon">
										<view class="icon-wrap wlkflex justify-center"
											:style="{backgroundColor: insurances.indexOf(item)===-1?'#FFFFFF':themeColor,borderColor:insurances.indexOf(item)===-1?'#c8c9cc':themeColor}">
											<u-icon name="checkbox-mark" size="12" color="#FFFFFF"
												v-if="insurances.indexOf(item)!==-1"></u-icon>
										</view>
									</view>
									<view class="insurance-title u-line-2">
										{{item.name}}
									</view>
									<view class="insurance-price">
										<view class="price">¥{{item.price}} <text class="col9">/人/天</text> </view>
										<view class="col9 wlkflex justify-end" @tap.stop="tipInsurance(index)">
											<view>详情</view>
											<u-icon name="arrow-right" size="12" color="#999"></u-icon>
										</view>
									</view>
								</view>
							</view>
						</block>
						<block v-if="!$u.test.isEmpty(line.site_ids)">
							<u-gap height="8" bgColor="#F9F9F9"></u-gap>
							<view class="title mb20">集合点</view>
							<view class="pd030 wlkflex wrap">
								<view @click="siteClick(index)"
									:class="'overHidden mt20 site-item br04 relative wlkflex '+[siteIndex==index?'active':'']"
									:style="siteIndex==index?'border-color:'+themeColor:''"
									v-for="(item, index) in line.site_ids" :key="index">
									<view class="wd100 center name"
										:style="siteIndex==index?'color:'+themeColor:'color:#999999'">
										{{item.name}}
									</view>
									<view class="active-icon" :style="{backgroundColor:themeColor}"
										v-if="siteIndex==index">
										<u-icon size="12" name="checkmark" color="#FFFFFF"></u-icon>
									</view>
								</view>
							</view>
						</block>
						<block v-if="!$u.test.isEmpty(selectedDate.bxinfo)">
							<u-gap height="8" bgColor="#F9F9F9"></u-gap>
							<view class="title">必消项目</view>
							<view class="pd030 pb20 ">
								<view v-for="(bxInfo,index) in selectedDate.bxinfo" :key="index"
									class="wlkflex justify-between bxinfo">
									<view class="u-line-2">{{bxInfo.name}}</view>
									<view class="price">¥{{bxInfo.price}}</view>
								</view>
							</view>
						</block>
					</block>
					<block v-else>
						<view class="mt20 mb20">
							<u-empty iconSize="60" text="请先选择出发日期">
							</u-empty>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="fixed-buy-btn wd100 wlkflex justify-between">
			<view class="calculate-info wlkflex">
				<block v-if="orderInfo.total_price>0">
					<view class="bz">总价：</view>
					<view class="price">￥{{orderInfo.total_price}}</view>
					<view class="ml10">
						<u-icon :name="showItem?'arrow-down':'arrow-up'" @click="setShowItem" size="10"
							color="#999"></u-icon>
					</view>
				</block>
			</view>
			<view class="buy-btn">
				<u-button :customStyle="{
                    fontWeight: 'bold',
                    height:'90rpx'
                }" :color="themeColor" size="large" :disabled="!orderInfo.total_price>0" shape="circle" @click="next()"
					text="下一步"></u-button>
			</view>
		</view>
		<u-action-sheet :show="tipInfo.show" @close="tipInfo.show = false" :title="tipInfo.title" :round="10"
			closeOnClickOverlay safeAreaInsetBottom>
			<view class="tip-content" v-html="tipInfo.content"></view>
		</u-action-sheet>
		<u-action-sheet :show="tipInsuranceInfo.show" @close="tipInsuranceInfo.show = false"
			:title="tipInsuranceInfo.title" :round="10" closeOnClickOverlay safeAreaInsetBottom>
			<scroll-view class="tip-content" scroll-y>
				<view class="pt20 pb20 head-info">
					<view v-if="!$u.test.isEmpty(tipInsuranceInfo.content.age_range)">
						<text>承保年龄</text>
						<text class="ml20">{{tipInsuranceInfo.content.age_range}}</text>
					</view>
					<view class="mt10" v-if="!$u.test.isEmpty(tipInsuranceInfo.content.usetime)">
						<text>保障时间</text>
						<text class="ml20">{{tipInsuranceInfo.content.usetime}}</text>
					</view>
				</view>
				<view class="pt20 pb20 nav-info" v-if="!$u.test.isEmpty(tipInsuranceInfo.content.iteminfo)">
					<view class="center bold">保险项目及保险额度</view>
					<view v-for="(item,index) in tipInsuranceInfo.content.iteminfo" :key="index">
						<view class="mt20 item-title">{{item.name}}</view>
						<view v-for="(v,k) in item.infos" :key="index" class="wlkflex justify-between mt10 col9">
							<view class="left">{{v.name}}</view>
							<view class="right">{{v.price}}元</view>
						</view>
					</view>
				</view>
				<view class="pt20 pb20" v-if="!$u.test.isEmpty(tipInsuranceInfo.content.content)">
					<view class="center bold">详情</view>
					<view class="mt20">
						<u-parse :content="tipInsuranceInfo.content.content"></u-parse>
					</view>
				</view>
			</scroll-view>
		</u-action-sheet>
		<u-popup safeAreaInsetBottom :show="showItem" closeable @close="showItem=false" round="20">
			<view class="order-item">
				<view class="pd30">
					<view class="center title">价格明细</view>
					<view class="item-info">
						<view class="info-flex wlkflex justify-between mt40">
							<view class="info-head">基本团费</view>
							<view class="info-price">￥{{orderInfo.base_price}}</view>
						</view>
						<view class="info-flex wlkflex justify-between mt10" v-if="orderInfo.adult_num>0">
							<view class="info-desc col9">成人</view>
							<view class="info-desc-price col9">
								<text>
									￥{{selectedDate.price}}
								</text>
								<text class="ml05">
									x{{orderInfo.adult_num}}人
								</text>
							</view>
						</view>
						<view class="info-flex wlkflex justify-between mt10" v-if="orderInfo.elder_num>0">
							<view class="info-desc col9">老人</view>
							<view class="info-desc-price col9">
								<text>
									￥{{selectedDate.elderprice}}
								</text>
								<text class="ml05">
									x{{orderInfo.elder_num}}人
								</text>
							</view>
						</view>
						<view class="info-flex wlkflex justify-between mt10" v-if="orderInfo.child_num>0">
							<view class="info-desc col9">儿童</view>
							<view class="info-desc-price col9">
								<text>
									￥{{selectedDate.childprice}}
								</text>
								<text class="ml05">
									x{{orderInfo.child_num}}人
								</text>
							</view>
						</view>
						<view class="info-flex wlkflex justify-between mt10" v-if="orderInfo.room_num>0">
							<view class="info-desc col9">单房差</view>
							<view class="info-desc-price col9">
								<text>
									￥{{selectedDate.roomblance}}
								</text>
								<text class="ml05">
									x{{orderInfo.room_num}}份
								</text>
							</view>
						</view>
						<block v-if="orderInfo.insurances_price>0">
							<view class="info-flex wlkflex justify-between mt30">
								<view class="info-head">保险费用</view>
								<view class="info-price">￥{{orderInfo.insurances_price}}</view>
							</view>
							<view class="info-flex wlkflex justify-between mt10" v-for="(item,index) in insurances"
								:key="index">
								<view class="info-desc col9">{{item.name}}</view>
								<view class="info-desc-price col9">
									<text>
										￥{{item.price}}
									</text>
									<text class="ml05">
										x{{orderInfo.total_people}}份x{{line.lineday}}天
									</text>
								</view>
							</view>
						</block>
						<block v-if="!$u.test.isEmpty(selectedDate.bxinfo)">
							<view class="info-flex wlkflex justify-between mt30">
								<view class="info-head">必消项目</view>
								<view class="info-price">￥{{orderInfo.bx_price}}</view>
							</view>
							<view class="info-flex wlkflex justify-between mt10"
								v-for="(item,index) in selectedDate.bxinfo" :key="index">
								<view class="info-desc col9">{{item.name}}</view>
								<view class="info-desc-price col9">
									<text>
										￥{{item.price}}
									</text>
									<text class="ml05">
										x{{orderInfo.total_people}}人
									</text>
								</view>
							</view>
						</block>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show" @close="close" @open="open" mode="bottom" zIndex='999999'>
			<view class="popup">
				<view class="tc p20 f34 fb bg-white">选择优惠券</view>
				<scroll-view scroll-y class="scroll">
					<view v-for="(item, index) in coupon" :key="index" class="coupon">
						<view class="pt_left">
							<view class="pt_left-content">
								<view class="f1" style="color:red">
									<text class="t0">￥</text>
									<text class="t1">{{item.sub_price}}</text>
								</view>
								<view class="f2" style="color:red">
									<text v-if="item.min_price>0">满{{item.min_price}}元可用</text>
									<text v-else>无门槛</text>
								</view>
							</view>
						</view>
						<view class="pt_right">
							<view class="f1">
								<view class="t1">{{item.name}}</view>
								<text class="t2" style="background:rgba(255,0,0,0.1);color:red">满减券</text>
								<view class="t3" :style="item.bid>0?'margin-top:0':'margin-top:10rpx'">有效期至
									{{item.endtime}}
								</view>
							</view>
							
							<image v-if="item.min_price > orderInfo.total_price"
								src="https://feiyaoss.oss-cn-shenzhen.aliyuncs.com/uploads/20241028/8896e3d5f2f340976442c8081635f4da.png" class="icon"></image>
							<button v-else class="btn"
								@click="check = true,show = false,select = item.name,orderInfo.coupon_id = item.id">选择</button>	
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		formatRichText
	} from '@/wlkutils/tools';
	import {
		cal
	} from '@/wlkutils/cal'
	import {
		mapGetters
	} from 'vuex';
	var _self;
	export default {
		computed: {
			...mapGetters(['userInfo', 'themeColor', 'isLogin'])
		},
		data() {
			return {
				id: '',
				line: {},
				check: false,
				show: false,
				select: '',
				coupon: {},
				loading: true,
				suitIndex: 0,
				siteIndex: 0,
				priceIndex: '',
				orderInfo: {
					adult_num: 0,
					elder_num: 0,
					child_num: 0,
					room_num: 0,
					total_price: 0,
					adult_price: 0,
					elder_price: 0,
					child_price: 0,
					room_price: 0,
					base_price: 0,
					insurances_price: 0,
					total_people: 0,
					bx_price: 0,
					coupon_id: 0,
				},
				orderInfoInit: {
					adult_num: 0,
					elder_num: 0,
					child_num: 0,
					room_num: 0,
					total_price: 0,
					adult_price: 0,
					elder_price: 0,
					child_price: 0,
					room_price: 0,
					base_price: 0,
					insurances_price: 0,
					total_people: 0,
					bx_price: 0,
					coupon_id: 0,
				},
				selectedDate: {},
				tipInsuranceInfo: {
					show: false,
					title: '',
					content: '',
				},
				tipInfo: {
					show: false,
					title: '',
					content: '',
				},
				room_min: 0, //最小单房差
				room_max: 0, //最大单房差
				adult_min: 0,
				elder_min: 0,
				child_min: 0,
				insurances: [],
				showItem: false,
				calendarList: {},
				calendarTabs: {},
				max_num: Number.MAX_SAFE_INTEGER
			};
		},
		onLoad() {
			_self = this;
			_self.id = this.$Route.query.id;
			_self.suitIndex = this.$Route.query.suitIndex ?? 0;
			_self.priceIndex = this.$Route.query.priceIndex ?? '';
			this.getData();
		},
		onShow() {

		},
		methods: {
			open() {

			},
			close() {
				this.show = false
			},
			setShowItem() {
				this.showItem = !this.showItem;
			},
			checkboxChange(n) {
				var index = this.insurances.indexOf(n);
				if (index === -1) {
					this.insurances.push(n);
				} else {
					this.insurances.splice(index, 1);
				}
				this.calculateTotalPrice();
			},
			tipInsurance(index) {
				this.tipInsuranceInfo.title = this.line.insuranceinfo[index].name;
				this.tipInsuranceInfo.content = this.line.insuranceinfo[index];
				this.tipInsuranceInfo.content.content = formatRichText(this.tipInsuranceInfo.content.content);
				this.tipInsuranceInfo.show = true;

			},
			//切换套餐
			radioClick(index) {
				this.suitIndex = index;
				_self.calendarList = _self.line.suitinfo[index].groupsDay ?? {};
				_self.calendarTabs = _self.line.suitinfo[index].tabs ?? {};
				this.priceIndex = '';
				this.selectedDate = {};
				this.insurances = [];
				this.calculateTotalPrice();
			},
			//切换上车点
			siteClick(index) {
				this.siteIndex = index;
			},
			Tip(type) {
				switch (type) {
					case 'adult':
						this.tipInfo.title = '成人标准';
						this.tipInfo.content = this.line.suitinfo[this.suitIndex].person;
						break;
					case 'old':
						this.tipInfo.title = '老人标准';
						this.tipInfo.content = this.line.suitinfo[this.suitIndex].oldperson;
						break;
					case 'child':
						this.tipInfo.title = '儿童标准';
						this.tipInfo.content = this.line.suitinfo[this.suitIndex].child;
						break;
					case 'room':
						this.tipInfo.title = '单房差说明';
						this.tipInfo.content = this.line.suitinfo[this.suitIndex].room;
						break;
				}
				this.tipInfo.show = true;
			},
			getData() {
				_self.loading = true;
				uni.$u.http.post('line/getDetail', {
					id: _self.id
				}).then(res => {
					_self.line = res.data.line;
					_self.coupon = res.data.coupon;
					if (_self.line.suitinfo.length > 0) {
						_self.line.suitinfo.forEach(function(v, k) {
							let result = _self.line.suitinfo[k].priceinfo.length > 0 ? _self.groupsDay(
								_self.line.suitinfo[k]) : [];
							_self.line.suitinfo[k].groupsDay = result.groupsDay;
							_self.line.suitinfo[k].tabs = result.tabs;
						})
						_self.calendarList = _self.line.suitinfo[_self.suitIndex].groupsDay;
						_self.calendarTabs = _self.line.suitinfo[_self.suitIndex].tabs;
					}
					_self.loading = false;
				}).catch(res => {

				})
			},
			groupsDay(data) {
				const groupedData = data.priceinfo.reduce((groups, item) => {
					const timeStr = item.date.toString(); // 将时间转换为字符串
					const year = timeStr.substr(0, 4); // 提取年份
					const month = timeStr.substr(5, 2); // 提取月份
					const key = `${year}-${month}`; // 以年-月作为分组的键
					if (!groups[key]) {
						groups[key] = []; // 创建新的分组数组
					}
					groups[key].push(item); // 添加对象到对应的分组数组
					return groups;
				}, {});
				var tabs = new Array();
				for (var year in groupedData) {
					let obj = new Object();
					obj.name = year.substr(5, 2) + '月';
					obj.date = year;
					obj.id = data.id; //套餐id
					obj.lineid = data.lineid; //线路id
					if (!tabs[year]) {
						tabs[year] = [];
					}
					tabs[year] = obj;
				}
				let result = new Object();
				result.tabs = Object.values(tabs);
				result.groupsDay = groupedData;
				return result;
			},
			calculate(date) {
				this.selectedDate = date;
				this.insurances = [];
				this.orderInfo = JSON.parse(JSON.stringify(this.orderInfoInit));
				this.adult_min = 0;
				this.elder_min = 0;
				this.child_min = 0;
				//赋值默认出行人数
				if (!uni.$u.test.isEmpty(this.selectedDate)) {
					if (this.selectedDate.price > 0) {
						this.orderInfo.adult_num = 1;
						this.adult_min = 1;
					} else if (this.selectedDate.elderprice > 0) {
						this.orderInfo.elder_num = 1;
						this.elder_min = 1;
					} else if (this.selectedDate.childprice > 0) {
						this.orderInfo.child_num = 1;
						this.child_min = 1;
					}
					this.calcRoom();
				}
				this.calculateTotalPrice();
			},
			//计算单房差
			calcRoom() {
				if (this.selectedDate.roomblance > 0) {
					//查询参与计算单房差的人群
					var calc_num = 0;
					this.selectedDate.roomcount.forEach(function(v, k) {
						switch (v) {
							case 'adult':
								calc_num += _self.orderInfo.adult_num;
								break;
							case 'elder':
								calc_num += _self.orderInfo.elder_num;
								break;
							case 'child':
								calc_num += _self.orderInfo.child_num;
								break;
						}
					});
					//最小值
					if (calc_num % 2 === 0) {
						this.orderInfo.room_num = 0;
						this.room_min = 0;
					} else {
						this.orderInfo.room_num = 1;
						this.room_min = 1;
					}
					//最大值
					this.room_max = calc_num;
				}
			},
			//单房差变动
			changeRoom(e) {
				this.orderInfo.room_num = e.value;
				this.calculateTotalPrice();
			},
			//出行人数变动
			changeNum(e) {
				this.orderInfo[e.name] = e.value;
				this.calcRoom();
				this.calculateTotalPrice();
			},
			//计算总价
			calculateTotalPrice() {
				this.orderInfo.total_price = 0;
				if (!uni.$u.test.isEmpty(this.selectedDate)) {
					this.orderInfo.total_people = cal.jia(this.orderInfo.adult_num, this.orderInfo.elder_num, this
						.orderInfo.child_num); //总人数
					this.orderInfo.adult_price = cal.cheng(this.orderInfo.adult_num, this.selectedDate.price);
					this.orderInfo.elder_price = cal.cheng(this.orderInfo.elder_num, this.selectedDate.elderprice);
					this.orderInfo.child_price = cal.cheng(this.orderInfo.child_num, this.selectedDate.childprice);
					this.orderInfo.room_price = cal.cheng(this.orderInfo.room_num, this.selectedDate.roomblance); //单房差
					this.orderInfo.base_price = cal.jia(this.orderInfo.adult_price, this.orderInfo.elder_price, this
						.orderInfo.child_price, this.orderInfo.room_price); //基本费用
					//保险
					var insurances_price = 0;
					this.insurances.forEach(function(v) {
						insurances_price += cal.cheng(v.price, _self.line.lineday);
					});
					//保险金额*总人数*线路线路
					this.orderInfo.insurances_price = cal.cheng(insurances_price, this.orderInfo.total_people);
					//必消
					var bx_price = 0;
					this.selectedDate.bxinfo.forEach(function(b) {
						bx_price = cal.jia(bx_price, b.price);
					});
					this.orderInfo.bx_price = cal.cheng(bx_price, this.orderInfo.total_people);
					this.orderInfo.total_price = cal.jia(this.orderInfo.adult_price, this.orderInfo.elder_price, this
						.orderInfo.child_price, this.orderInfo.room_price, this.orderInfo.insurances_price, this
						.orderInfo.bx_price);
				}
			},
			next() {
				let obj = new Object();
				obj.id = _self.id;
				obj.suitid = _self.selectedDate.suitid;
				const insurance_ids = this.insurances.map(obj => obj.id);
				obj.insurance_ids = insurance_ids.join(',');
				obj.selected_id = _self.selectedDate.id;
				if (!uni.$u.test.isEmpty(_self.line.site_ids)) {
					obj.site_id = _self.line.site_ids[_self.siteIndex].id;
				}
				const query = Object.assign({}, _self.orderInfo, obj);
				this.$Router.push({
					path: '/pages/line/create',
					query: query
				});
			}
		},
	};
</script>

<style lang="scss">
	.scroll {
		max-height: 40vh;
	}

	page {
		background-color: #FFFFFF !important;
		padding-bottom: 150rpx;

		.head-title {
			font-size: 29rpx;
			font-weight: bold;
		}

		.day-title {
			padding: 30rpx 30rpx 20rpx 30rpx;

			.title {
				font-size: 29rpx;
				font-weight: bold;
			}

			.desc {
				font-size: $font-sm;
				color: $uni-text-color-grey;

			}
		}

		.active-icon {
			padding: 5rpx 0rpx 0 5rpx;
			border-radius: 8px 0 0px 0;
			position: absolute;
			right: 0;
			bottom: 0;
		}

		.pack {
			.pack-item {
				min-width: 200rpx;
				background-color: #f3f8fe;
				margin: 10rpx;
				height: 90rpx;
				border: 1px solid #f3f3f3;
				padding: 0 10rpx;

				.name {
					font-size: $font-lt;
				}
			}

			.active {
				/*          border-bottom: 10rpx solid;
                min-width: 210rpx;
                height: 100rpx;*/
				box-shadow: 0 2px 4px rgba(0, 0, 0, .06);
			}
		}

		.order-box {
			.title {
				font-size: 29rpx;
				font-weight: bold;
				padding: 30rpx 30rpx 0 30rpx;
			}

			.order-info {
				padding: 0;

				.title {
					display: flex;
					justify-content: space-between;
				}

				.u-button {
					border: none;
					width: 30%;
					height: 50rpx;
					// padding-bottom: 30rpx;
					font-weight: normal;
				}

				.price {
					color: $-tour-price-color;
				}
			}

			.step-title {
				font-size: $font-base;
				margin-right: 20rpx;
			}

			.alert {
				width: 95%;
				margin: 20rpx auto 0 auto;
				padding: 20rpx;
				background-color: #fff9f1;
				color: #b69977;
				font-size: $font-base;
			}

			.insurance {
				padding: 20rpx 0;
				font-size: $font-base;
				border-bottom: 1px solid #eaebec;

				.insurance-icon {
					width: 10%;

					.icon-wrap {
						width: 36rpx;
						height: 36rpx;
						border: 1px solid #c8c9cc;
						border-radius: 3px;
						transition-duration: 0.2s;
					}
				}

				.insurance-title {
					width: 70%;
				}

				.insurance-price {
					width: 22%;
					text-align: right;

					.price {
						font-size: $font-lt;
					}

					.bz {}
				}
			}

			.bxinfo {
				padding: 30rpx 0;
				font-size: $font-base;
				border-bottom: 1px solid #eaebec;

				.price {
					font-size: $font-lt;
				}

			}

			.site-item {
				width: 200rpx;
				background-color: #FFFFFF;
				margin: 10rpx;
				height: 90rpx;
				border: 1px solid $border-color-dark;

				.name {
					font-size: $font-lt;
				}
			}

			.active {
				/*border-bottom: 10rpx solid;*/
				/* width: 210rpx;
                height: 100rpx;*/
				box-shadow: 0 2px 4px rgba(0, 0, 0, .06);
			}

		}

		.tip-content {
			text-align: left;
			padding: 30rpx;
			height: 900rpx;
			font-size: $font-base;

			.head-info {
				border-bottom: 1px solid #eaebec;
			}

			.nav-info {
				border-bottom: 1px solid #eaebec;

				.left {
					width: 70%;
				}

				.right {
					width: 28%;
				}
			}

			.item-title {
				color: #666666;
				font-weight: bold
			}
		}

		.fixed-buy-btn {
			position: fixed;
			z-index: 1;
			padding: 20rpx 30rpx;
			background-color: #FFFFFF;
			bottom: 0;
			box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1);

			.calculate-info {
				width: 50%;
				font-size: $font-lt;

				.bz {}

				.price {
					font-size: $font-max;
					color: $-tour-price-color;
				}
			}

			.buy-btn {
				width: 40%;
			}
		}

		.order-item {
			padding-bottom: 150rpx;
			min-height: 800rpx;

			.title {
				font-size: $font-lg;
				color: $uni-text-color;
				font-weight: bold;
			}

			.item-info {
				font-size: $font-lt;

				.info-flex {
					.info-head {
						font-size: $font-base;
						font-weight: bold;
					}

					.info-desc {
						font-size: $font-sm;
					}

					.info-price {
						font-size: $font-base;
						color: $-tour-price-color;
					}

					.info-desc-price {
						font-size: $font-sm;
					}
				}
			}
		}
	}

	.coupon {
		width: 100%;
		display: flex;
		border-radius: 10rpx;
		// overflow: hidden;
		// align-items: center;
		// position: absolute;
		bottom: 120rpx;
		background: #fff;
	}

	.coupon .pt_left {
		background: #fff;
		min-height: 200rpx;
		color: #FFF;
		width: 30%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center
	}

	.coupon .pt_left-content {
		width: 100%;
		height: 100%;
		margin: 30rpx 0;
		border-right: 1px solid #EEEEEE;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center
	}

	.coupon .pt_left .f1 {
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
	}

	.coupon .pt_left .t0 {
		padding-right: 0;
	}

	.coupon .pt_left .t1 {
		font-size: 60rpx;
	}

	.coupon .pt_left .t2 {
		padding-left: 10rpx;
	}

	.coupon .pt_left .f2 {
		font-size: 20rpx;
		color: #4E535B;
		text-align: center;
	}

	.coupon .pt_right {
		background: #fff;
		width: 70%;
		display: flex;
		min-height: 200rpx;
		text-align: left;
		padding: 20rpx 20rpx;
		position: relative
	}

	.coupon .pt_right .f1 {
		flex-grow: 1;
		flex-shrink: 1;
	}

	.coupon .pt_right .f1 .t1 {
		font-size: 28rpx;
		color: #2B2B2B;
		font-weight: bold;
		height: 60rpx;
		line-height: 60rpx;
		overflow: hidden
	}

	.coupon .pt_right .f1 .t2 {
		height: 36rpx;
		line-height: 36rpx;
		font-size: 20rpx;
		font-weight: bold;
		padding: 0 16rpx;
		border-radius: 4rpx;
		margin-right: 16rpx;
	}

	.coupon .pt_right .f1 .t2:last-child {
		margin-right: 0;
	}

	.coupon .pt_right .f1 .t3 {
		font-size: 20rpx;
		color: #999999;
		height: 46rpx;
		line-height: 46rpx;
	}

	.coupon .pt_right .f1 .t4 {
		font-size: 20rpx;
		color: #999999;
		height: 46rpx;
		line-height: 46rpx;
		max-width: 76%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.coupon .pt_right .btn {
		background-image: linear-gradient(270deg, red 0%, rgba(255, 0, 0, 0.8) 100%);
		position: absolute;
		right: 16rpx;
		top: 49%;
		margin-top: -28rpx;
		border-radius: 28rpx;
		width: 140rpx;
		height: 56rpx;
		line-height: 56rpx;
		color: #fff
	}

	.coupon .pt_right .sygq {
		position: absolute;
		right: 30rpx;
		top: 50%;
		margin-top: -50rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.coupon .pt_left.bg3 {
		background: #ffffff;
		color: #b9b9b9 !important
	}

	.coupon .pt_right.bg3 .t1 {
		color: #b9b9b9 !important
	}

	.coupon .pt_right.bg3 .t3 {
		color: #b9b9b9 !important
	}

	.coupon .pt_right.bg3 .t4 {
		color: #999999 !important
	}

	.coupon .radiobox {
		position: absolute;
		left: 0;
		padding: 20rpx
	}

	.coupon .radio {
		flex-shrink: 0;
		width: 32rpx;
		height: 32rpx;
		background: #FFFFFF;
		border: 2rpx solid #BFBFBF;
		border-radius: 50%;
	}

	.coupon .radio .radio-img {
		width: 100%;
		height: 100%
	}

	.icon {
		width: 100rpx;
		height: 100rpx;
		margin: auto;
	}
</style>